<template>
  <div class="new-index-page">
        <div class="item banner-screen">
          <div class="my-arrow left-arrow" @click="carouselRef.prev" v-if="bannerList.length > 1">
            <img :src="lunLeftIcon" alt="">
          </div>
          <el-carousel :pause-on-hover="false" ref="carouselRef" v-if="bannerList[0] !== null && isShow"
            :class="bannerList.length === 1 ? 'noindicator' : ''" class="ban" :autoplay="true" :interval="6000"
            indicator-position="none" arrow="never">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
              <div class="banner-main">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="title2">
                  {{ item.title2 }}
                </div>
              </div>
              <video :key="videoKey" v-if="item.src?.indexOf('.mp4') !== -1 || item.src?.includes('.webm')"
                class="video-bg" autoplay="true" loop="true" muted="true" @oncanplaythrough="oncanplaythrough">
                <source :src="item.src">
              </video>
              <img v-else class="video-bg" :src="item.src" />
              <!-- <video class="video-bg" autoplay="true" loop="true" muted="true" src="@/assets/video/banner.mp4"
                @oncanplaythrough="oncanplaythrough" /> -->

            </el-carousel-item>
          </el-carousel>
          <div class="my-arrow right-arrow" @click="carouselRef.next" v-if="bannerList.length > 1">
            <img :src="lunRightIcon" alt="">
          </div>
        </div>
   
        <Second/>
        <Footer />
    

  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { useStore } from 'vuex';
// 导入swiper组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// 引入swiper样式（按需导入）
// import 'swiper/swiper.css';
// import 'swiper/css/pagination'; // 轮播图底面的小圆点
// 引入swiper核心和所需模块
import { Mousewheel, Pagination } from 'swiper/modules';

import Second from "@/views/index/components/second.vue"


import Footer from '@/views/home/footer.vue';
import lunLeftIcon from '@/assets/images/home/chevron-left-line.png'
import lunRightIcon from '@/assets/images/home/chevron-right-line.png'

import { getAdvertisement } from "@/api/index.ts"

const proxy = getCurrentInstance().proxy;
const carouselRef = ref(null)
const swiperRef = ref(null);
const swiperActiveIndexRef = ref(0);

const modules = [Mousewheel, Pagination];
const { dispatch } = useStore();
const store = useStore();
const videoKey = ref(Date.now())
// swiper实例
const homeSwiper = ref(null);

const bannerList = ref([]);

const isShow = ref(false);


onMounted(() => {
  advertisement(1);
  store.commit('setIsFirstPage', true)
  setTimeout(() => {
    isShow.value = true
  }, 50)

});

onUnmounted(() => {
  store.commit('setIsFirstPage', true)
})

function swiperNext() {
  homeSwiper.value.slideNext()
}

function oncanplaythrough() {
  console.log('可以播放了')
}
// 获取首页广告
async function advertisement(position) {
  console.log(store.state.homeBannerList, 'state')
  if (store.state.homeBannerList.length) {
    videoKey.value = Date.now()
    bannerList.value = [...store.state.homeBannerList]
    return
  }
  const parmas = {
    position
  };
  const result = await getAdvertisement(parmas);
  if (result.code === 0) {
    bannerList.value = result.data.map(
      (item) => {
        return {
          playbackDuration: item.playbackDuration,
          src: item.pictureResources,
          title: item.mainTitle,
          title2: item.subTitle,
        };
      }
    );
    // 存储首页banner的数据，防止切换菜单时首屏白屏
    store.commit('setHomeBannerList', bannerList.value)

  }
}
// 初始化
const onSwiper = (swiper) => {
  homeSwiper.value = swiper;
};
// swiper切换时触发
const onSlideChange = (swiper) => {

  swiperActiveIndexRef.value = swiper.activeIndex

  // console.log(swiper.activeIndex, 'swiper');
  store.commit('setIsFirstPage', swiper.activeIndex == 0)
};
</script>

<style lang="scss" scoped>
@keyframes myanimation {
  from {
    opacity: 1
  }

  to {
    opacity: .3;
  }
}

.new-index-page {
  width: 100%;
  background: url('@/assets/test/bg.png') no-repeat;
  // height: 100vh;
  // height: 100%;

  .video-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .banner-main {
    position: absolute;
    width: 100%;

    img {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
    }

    .title {
      font-size: 68px;
      line-height: 80px;
      font-family: Source Han Sans CN Bold;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 10px;
      text-align: center;
    }

    .title2 {
      font-size: 25px;
      font-family: Source Han Sans CN Medium;
      line-height: 30px;
      font-weight: 500;
      color: #ffffff;
      text-align: center;
    }
  }

  .ban {
    height: 100%;
  }

  .banner-screen {
    height: 800px;
    .my-arrow {
      align-items: center;

      border: none;
      border-radius: 50%;
      color: #ffffff;
      cursor: pointer;
      display: inline-flex;
      font-size: 16px;
      height: 16px;
      justify-content: center;
      margin: 0;
      outline: none;
      padding: 0;
      position: absolute;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
      transition: all .3s;
      width: 16px;
      z-index: 10;
    }

    .left-arrow {
      left: 24px;
    }

    .right-arrow {
      right: 24px;
    }

    .bottom-tip {
      animation-name: myanimation;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-direction: alternate;

      font-family: Source Han Sans CN Regular;
      font-weight: 400;
      cursor: pointer;
      text-align: center;
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);

      .down-t {
        font-family: Source Han Sans CN Regular;
        font-weight: 400;
        font-size: 16px;
        color: #F0F7FF;
        line-height: 24px;
      }

      .top-t {
        font-family: Source Han Sans CN Regular;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        line-height: 24px;
        margin-bottom: 10px;

        img {
          width: 40px;
          height: 40px;
        }

      }
    }
  }

  .item {
    width: 100%;

    position: relative;

    &::v-deep {
      .el-carousel__container {
        height: 100%;

        .el-carousel__item {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .name {
      font-size: 100px;
      color: #fff;
    }
  }

  .item-footer {
    width: 100%;
    height: 300px;
  }
}



.swiper {
  width: 100%;
  height: 100%;

  .last-slide {
    height: 261px;
  }
}
</style>
